import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
import css from 'highlight.js/lib/languages/css';
import js from 'highlight.js/lib/languages/javascript';
import ts from 'highlight.js/lib/languages/typescript';
import html from 'highlight.js/lib/languages/xml';
// load all languages with "all" or common languages with "common"
import { all, createLowlight } from 'lowlight';
import { Select } from 'antd';
import styles from './index.module.css';

const Option = Select.Option;
const lowlight = createLowlight(all);
lowlight.register('html', html);
lowlight.register('css', css);
lowlight.register('js', js);
lowlight.register('ts', ts);

const CodeContentButton = ({
  node: {
    attrs: { language: defaultLanguage },
  },
  updateAttributes,
  extension,
}) => {
  return (
    <NodeViewWrapper className={styles['code-block']}>
      <Select
        size="small"
        className="float-right mt-1 min-w-[120px]"
        contentEditable={false}
        defaultValue={defaultLanguage}
        onChange={(value) => {
          updateAttributes({ language: value });
        }}
      >
        <Option key="auto" value="null">
          auto
        </Option>
        {extension.options.lowlight.listLanguages().map((lang, index) => (
          <Option key={index} value={lang}>
            {lang}
          </Option>
        ))}
      </Select>
      <pre>
        <NodeViewContent as="code" />
      </pre>
    </NodeViewWrapper>
  );
};

export { CodeContentButton, lowlight };
